<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error {
            color: #f00;
        }
    </style>
</head>
<body>
<p>
    vuejs 提供了另外一种数据处理的方案，叫做 计算属性 computed，我们有些数据的显示是依赖于其他数据的变化，则这个时候就可以使用到计算属性。

</p>
<p>需求：小计求和，现在存在一件商品，存在单价和用户购买的数量，然后需要计算出小计</p>
<div id="app">
    <h1>{{ title }}</h1>
    <hr>
    <div>
        <h2>单价：¥：{{ price }}</h2>
        <input type="text" v-model="goodsNumber">
        <hr>
        <h3>小计：{{ price * goodsNumber }}</h3>
        <p>计算属性在定义的时候，是一个函数，但是在调用的时候是以变量形式进行调用的。</p>
        <h3>computed 实现小计：{{ totalPrice }}</h3>
    </div>
</div>
</body>
<script src="./lib/vue.js"></script>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            title: 'hi vuejs!',
            username: '',
            message: '',
            price: 9,
            goodsNumber: 0,
        },
        computed: {
            /* totalPrice 是依赖于 商品的单价和商品的购买的数量 */
            totalPrice: function () {
                return  this.price * this.goodsNumber;
            }
        }
    });
</script>

</html>
